import { connect } from 'react-redux';
import { Component } from "react";
import {ListItem,ListInfo} from '../style';

class List extends Component {
    render(){
        const {list} = this.props;
        return(
            <div>
                {
                   list.map((item)=>(
                        <ListItem key={item.get('id')}>
                            <img className='pic' alt='' src={item.get('imgUrl')}></img>
                            <ListInfo>
                              <h3 className="title">{item.get('title')}</h3>
                              <p className="desc">{item.get('desc')}</p>
                            </ListInfo>
                        </ListItem>
                    ))
                }
            </div>
        )
    }
}

const mapState = (state) => {
    return{
        list:state.get('home').get('articleList')
    }
}

export default connect(mapState, null)(List);